<template>
  <div class="systemset-cityarea-container">
    <div v-if="queryForm.provincecode == 0">
      <el-table
        v-loading="listLoading"
        :data="list"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          type="selection"
        />
        <el-table-column
          align="center"
          label="城市ID"
          prop="ProvinceID"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          align="center"
          label="行政编码"
          prop="ProvinceCode"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column align="center" label="省级名称">
          <template #default="{ row }">
            <el-button text @click="getCityArea(row.ProvinceCode)">
              {{ row.ProvinceName }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否开放" width="200">
          <template #default="{ row }">
            <!-- <el-button text @click="handleEdit(row)">编辑</el-button>
            <el-button text @click="handleDelete(row)">删除</el-button> -->
            <el-switch
              v-model="row.nState"
              class="mt-2"
              inline-prompt
              :active-value="1"
              :inactive-value="0"
              :active-icon="Check"
              :inactive-icon="Close"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <div v-else>
      <el-table
        v-loading="listLoading"
        :data="citylists"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          type="selection"
        />
        <el-table-column
          align="center"
          label="城市ID"
          prop="CityID"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          align="center"
          label="所属省"
          prop="ProvinceName"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          align="center"
          label="行政编码"
          prop="CityCode"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          align="center"
          label="城市名称"
          prop="CityName"
          show-overflow-tooltip
        />
        <el-table-column align="center" label="是否开放" width="200">
          <template #default="{ row }">
            <el-switch
              v-model="row.nState"
              class="mt-2"
              inline-prompt
              :active-value="1"
              :inactive-value="0"
              :active-icon="Check"
              :inactive-icon="Close"
            />
          </template>
        </el-table-column>
      </el-table>
      <div>
        <vab-query-form>
          <vab-query-form-left-panel :span="12">
            <div style="margin-top: 20px">
              <el-button
                :icon="Plus"
                type="primary"
                size="mini"
                @click="handleBackup"
              >
                返回省级
              </el-button>
            </div>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel :span="12">
            <el-pagination
              background
              :current-page="queryForm.pageNo"
              :layout="layout"
              :page-size="queryForm.pageSize"
              :total="total"
              @current-change="handleCurrentCity"
              @size-change="handleSizeCity"
            />
          </vab-query-form-right-panel>
        </vab-query-form>
      </div>
    </div>
  </div>
</template>

<script>
  import { getList, cityList } from '@/api/systemsetCityarea'
  import { Delete, Plus, Search, Check, Close } from '@element-plus/icons-vue'

  export default defineComponent({
    setup() {
      const state = reactive({
        editRef: null,
        list: [],
        citylists: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          provincecode: 0,
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
      })

      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const getCityArea = (ProvinceCode) => {
        state.queryForm.provincecode = ProvinceCode
        fetchCityData()
      }
      const handleBackup = () => {
        state.queryForm.provincecode = 0
        fetchData()
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const handleSizeCity = (val) => {
        state.queryForm.pageSize = val
        fetchCityData()
      }
      const handleCurrentCity = (val) => {
        state.queryForm.pageNo = val
        fetchCityData()
      }
      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getList(state.queryForm)
        state.list = list
        state.total = total
        state.listLoading = false
      }
      const fetchCityData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await cityList(state.queryForm)
        state.citylists = list
        state.total = total
        state.listLoading = false
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        setSelectRows,
        getCityArea,
        handleBackup,
        handleSizeChange,
        handleCurrentChange,
        handleSizeCity,
        handleCurrentCity,
        queryData,
        fetchData,
        fetchCityData,
        Delete,
        Plus,
        Search,
        Check,
        Close,
      }
    },
  })
</script>
